<template>
  <div>
    <!-- 搜索 -->
    <div class="vcard">
      <div class="clearfix" style="position: relative">
        <el-input
          v-model="searchText"
          class="search-bar"
          placeholder="请输入技术相关信息进行查询"
          @keyup.enter.native="search(searchText)"
        ></el-input>
        <input
          data-count="searchMapBtn"
          class="search-btn"
          type="button"
          value="搜索"
          @click="search(searchText)"
        />
      </div>
      <div style="margin-top: 30px; width: 100%; height: 90%">
        <div class="company-list">
          <el-tabs class="eltabs" v-model="activeName">
            <el-tab-pane
              label="国内相关公司"
              name="first"
              style="width: 100%; height: 100%">
              <div class="scrollBox">
                <!-- <div v-if="mapCnList.length>0" class="listScroll">
                                <p class="company" v-for="(item, index) in mapCnList" :key="index" @click="enterDetails(item, true)">{{item.name}}</p>
                            </div> -->
                <el-table
                  :data="mapCnList"
                  :show-header="false"
                  v-loading="loading"
                  height="90%"
                  style="width: 100%"
                >
                  <el-table-column>
                    <template slot-scope="scope">
                      <a class="name" @click="goEvel(scope.row.name)">{{
                        scope.row.name
                      }}</a>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-tab-pane>
            <!-- <el-tab-pane label="国外相关公司" name="second" style="width:100%;height:100%;">
                        <div class="scrollBox">
                            <div class="listScroll">
                                <p class="company" v-for="(item, index) in mapEnList" :key="index" @click="enterDetails(item, true)">{{item.name}}</p>
                            </div>
                        </div>
                    </el-tab-pane> -->
          </el-tabs>
        </div>
        <div class="map-box">
          <iframe
            :src="ifSrc"
            frameborder="0"
            id="jl"
            scrolling="no"
            width="100%"
            height="100%"
          ></iframe>
        </div>
      </div>
    </div>
    <!-- 数据进度 -->
    <el-dialog
      title="数据生成进度"
      :visible.sync="dialogPercent"
      :before-close="closeTypes"
      width="45%"
      class="eldialog"
    >
      <el-progress class="elprogress" :percentage="percent"></el-progress>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closeTypes">后台处理</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
let types = null;
export default {
  data() {
    return {
      // this.$route.query.name||
      searchText: "氢能源",
      technologyList: [],
      activeName: "first",
      ifSrc:
        "./static/map/map.html" +
        "?keyword=" +
        "" +
        "&api=" +
        this.$Url.search.queryMap,
      mapCnList: [],
      mapEnList: [],
      status: "", // 登录状态，暴露给iframe
      dialogPercent: false,
      percent: 0,
      loading: false,
      dialogCompanyList: false,
      keywords: this.$route.query.name || "", // 接收从科技地图传过来的keywords
      cancel: null,
    };
  },
  methods: {
    goEvel(name) {
      let promise = new Promise((resolve, reject) => {
        // 获取companyId
        this.$get(this.$Url.company.getCompanyId, {
          keyWord: name,
        }).then((res) => {
          let data = res.data;
          if (data) {
            let eid = data.result[0]._id;
            resolve(eid);
          }
        });
      });
      promise.then((eid) => {
        this.enterCompany(name, eid, true);
      });
    },
    // 查询补全
    /* querySearchAsync(queryString, cb) {
      this.list = []
      this.$post(this.$Url.comparison.autoComplete,{
        url: '/v2/enterprise/searchListPaging',
        keyword: queryString || this.searchText,
        skip: 0
      }).then((res) => {
        let list = res.data ? res.data.items : [];
        list.forEach(v=>{
          this.list.push({'value':v.name})
        });
        cb(this.list)
      })
    }, */
    // 初始化页面进行检索
    findCompanyList(val) {
      this.loading = true;
      // 国内相关公司列表
      this.$post(this.$Url.search.findCompanyList, {
        dataType: "sql",
        foo: "SEARCH-MASTER",
        idi: "4",
        scontent: "ann%20%?data%ct%",
        sf: "QueryFulltextAnalysis",
        showType: "second",
        sl: "chs",
        sq: `R/${val} AND ns/中国 AND ANTYPE/企业 and top/400`,
        sx: "cn/queryrelated-searchmaster_cn",
      })
        .then((res) => {
          if (res.data) {
            this.mapCnList = res.data.sResult.data || "";
          }
          this.loading = false;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 搜索技术名称
    search(searchText) {
      this.searchText = searchText;
      this.ifSrc =
        "./static/map/map.html" +
        "?keyword=" +
        this.searchText +
        "&api=" +
        this.$Url.search.queryMap;
      document.getElementById("jl").contentWindow.location.reload(true);
      this.loading = true;
      this.findCompanyList(searchText);
    },
    // 进入公司页面
    enterCompany(companyName, eid, isNeedCheck) {
      if (companyName.indexOf("中译语通") > -1) {
        this.$message({
          type: "error",
          message: "当前账号暂无权限访问！",
        });
        return;
      }

      types = null;
      let checkUrl = this.$Url.search.check;
      if (!isNeedCheck) {
        checkUrl = this.$Url.search.check2;
      }
      let ths = this;
      this.$get(
        checkUrl,
        {
          companyName: companyName,
          eid: eid,
        },
        new axios.CancelToken(function executor(c) {
          ths.cancel = c;
        })
      ).then((res) => {
        // 无访问权限
        if (res.status === 40305) {
          return;
        }
        // 默认重置公司是否有专利的cookie
        this.$cookie.set("isHavePatent", true);
        if (res.status === 40401) {
          this.$message({
            type: "error",
            message: res.message,
          });
          return;
        }

        if (res.data.type == 0) {
          if (types != null) {
            clearTimeout(types);
            types = null;
          }
          this.$router.push({
            name: "evalInformationOver",
            query: {
              name: companyName,
              eid: eid,
            },
          });
        } else if (res.data.type == 1) {
          this.$confirm("后台生成数据需要一定的时间", "是否继续？", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            // 获取新闻信息
            this.$post(this.$Url.news.getData, {
              name: companyName,
            })
              .then((data) => {})
              .catch((e) => {
                console.log(e);
              });
            this.$get(this.$Url.search.generateData, {
              companyname: companyName,
              jueduidefen: true,
              eid: eid,
            })
              .then((res) => {
                if (res.status == 205) {
                  this.$message.warning(res.message);
                }
              })
              .catch((e) => {
                console.log(e);
              });
          });
        } else if (res.data.type == 2) {
          this.dialogPercent = true;
          this.percent = Number(res.data.percent) || 0;
          types = setTimeout(() => {
            this.enterCompany(companyName, eid, false);
          }, 4000);
        } else if (res.data.type == 3) {
          this.closeTypes();
          this.$message.error("数据计算失败，请联系后台管理员");
        }
      });
    },
    // 发现国内相关公司
    findCnMapList(list) {
      this.loading = false;
      this.mapCnList = list;
    },
    findEnMapList(list) {
      // this.loading = false
      this.mapEnList = list;
    },
    closeTypes() {
      this.dialogPercent = false;
      clearTimeout(types);
      types = null;
      // 中止请求
      this.cancel();
      this.dialogPercent = false;
    },
    // 监听登录状态，过期重新登录
    watchStatus(status) {
      this.status = status;
      this.$Bus.$emit("showLoginDialog", true);
    },
    loadingFinished(data) {
      this.dialogCompanyList = true;
    },
  },
  created() {
    // 在window上暴露方法，使iframe可以调用
    let that = this;
    window["loading"] = (status) => {
      this.loading = status;
    };
    window["mapKeywords"] = (keywords) => {
      /* that.$router.push({
            name: 'ScienceDiscovery'
        }) 
        that.searchText = keywords */
      that.search(keywords);
    };
    window["vueCnMapList"] = (list) => {
      that.findCnMapList(list);
    };
    window["vueEnMapList"] = (list) => {
      that.findEnMapList(list);
    };
    window["vueStatus"] = (status) => {
      that.watchStatus(status);
    };
    window["vueCurrentList"] = (keywords) => {
      // that.dialogCompanyList = true
      that.keywords = keywords;
    };
    // this.findCompanyList()
  },
  mounted() {
    let keyword = this.$route.params.keyword
    if (keyword) {
      this.searchText = keyword
      this.search(keyword)
    } else {
      this.search("氢能源")
    }
    // 阻止右键默认事件
    document.oncontextmenu = function (e) {
      e.preventDefault();
    };
  },
};
</script>

<style scoped>
.vcard {
  position: relative;
  width: 100%;
  height: 91vh;
  min-height: 800px;
  padding-bottom: 20px;
  background: #fff;
  padding: 20px;
}
.classify {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100px;
  height: 40px;
  line-height: 40px;
  border: 1px solid #e7e7fc;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  text-align: center;
  font-size: 14px;
  color: #7674a3;
  background-color: #f5f6fc;
  cursor: text;
}
.search-bar {
  display: block;
}
.search-btn {
  position: absolute;
  top: 0;
  right: -2px;
  z-index: 2;
  width: 150px;
  height: 36px;
  border: 1px solid #e7e7fc;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  /* box-sizing: border-box; */
  text-align: center;
  font-size: 14px;
  color: #03b38c;
  background-color: #e7e7fc;
  cursor: pointer;
}
.company-list {
  width: 300px;
  height: 100%;
  float: left;
}
.eltabs {
  width: 100%;
  box-sizing: border-box;
  height: 100%;
  font-size: 12px;
}
.scrollBox {
  position: relative;
  width: 100%;
  height: 100%;
}
.listScroll {
  position: absolute;
  left: 0;
  top: -20px;
  width: 100%;
  box-sizing: border-box;
  height: 95%;
  overflow-y: auto;
}
.company {
  font-size: 12px;
  text-align: left;
  padding-left: 20px;
  box-sizing: border-box;
  cursor: pointer;
  line-height: 50px;
  border-bottom: 1px solid #e8e7ec;
}
.company:hover {
  text-decoration: underline;
  color: $mainColor;
}
.map-box {
  float: left;
  margin-left: 20px;
  overflow: hidden;
  box-sizing: border-box;
  width: calc(100% - 320px);
  height: 100%;
  background-color: rgba(238, 238, 238, 0.973);
}
</style>
